<template>
  <div class='container'>
    <el-card>
      <el-row
        type="flex"
        justify="sapce-between"
        class="search"
      >
        <el-col>
          关键字
          <el-input
            placeholder="根据编号搜索"
            style="width:150px"
            v-model="pageInfo.keyword"
          />
        </el-col>
        <el-col class="right">
          <el-button @click="btnClear">清除</el-button>
          <el-button
            type="primary"
            @click="btnSearch"
          >搜索</el-button>
        </el-col>
      </el-row>
      <el-row class="alert">
        <el-col>
          <div>
            <i class="el-alert__icon el-icon-info"></i>
            共{{pageInfo.total}}条记录
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        class="listTable"
      >
        <el-table-column
          prop="id"
          label="编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          align="center"
          :formatter="formatterQsType"
        ></el-table-column>
        <el-table-column
          prop="questionIDs"
          label="题目编号"
          align="center"
        >
          <template slot-scope="{row}">
            <span
              v-for="(item,index) in row.questionIDs"
              :key="index"
            >
              <a
                @click="preview(item.id)"
                href="#"
                style="color: rgb(0, 153, 255)"
              >{{item.number}}</a>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="录入人"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="{row}">
            <el-button
              @click="btnDel(row.id)"
              class="del"
              type="danger"
              icon="el-icon-delete"
              circle
            />
          </template>
        </el-table-column>
      </el-table>
      <el-row
        type="flex"
        class="last"
        align="middle"
        justify="end"
      >
        <el-col
          :span="12.5"
          class="bottom"
        >
          <el-pagination
            background
            layout="prev, pager, next, sizes, jumper"
            :page-size="pageInfo.pagesize"
            :page-sizes="[20,30,50,100]"
            :current-page="pageInfo.page"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <QuestionsPreview ref="detail" :showDialog.sync="showDialog"></QuestionsPreview>
    </el-card>
  </div>
</template>

<script>
// 引入接口函数
import { randoms, removeRandoms } from '@/api/hmmm/questions'
// 引入题型枚举对象
import { questionType } from '@/api/hmmm/constants'
// 引入试题预览组件
import QuestionsPreview from '../components/questions-preview.vue'

export default {

  components: {
    QuestionsPreview
  },

  data () {
    return {
      tableData: [], //表格数据

      pageInfo: { //分页信息
        page: 1, //当前页码
        pagesize: 20, //当前每页条数
        total: 0, //总条数
        keyword: '', //搜索框内容
      },

      showDialog: false, //控制题目预览弹层显示
    }
  },

  created () { //初始化题库列表
    this.getRandoms()
  },

  methods: {
    async getRandoms () { //基础题库列表
      const { data } = await randoms(this.pageInfo)
      // console.log(data)
      // console.log(data.counts);
      this.pageInfo.total = data.counts
      this.tableData = data.items
    },

    formatterQsType (row, column, cellValue, index) { //格式化题型数据
      // 遍历对应关系数组,判断表格里的值是否有相应的对应关系
      const obj = questionType.find(item => item.value == cellValue)
      return obj ? obj.label : ''
    },

    btnClear () { //清除搜索框内容按钮
      this.pageInfo.keyword = ''
    },

    btnSearch () { //确认搜索按钮
      this.getRandoms()
    },

    async btnDel (id) { //删除按钮
      await this.$confirm('此操作将永久删除题组,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }) //提示询问框
      await removeRandoms({ id: id }) //删除题组请求
      this.$message.success('删除题组成功')
      this.getRandoms() //刷新列表

    },

    preview (id) { //预览题目
      this.$refs.detail.getQuestionDetail(id)
      this.showDialog = true //打开弹层
    },


    handleSizeChange (pagesize) { //pageSize 改变时会触发
      this.pageInfo.pagesize = pagesize
      this.getRandoms() //刷新列表
    },

    handleCurrentChange (currentPage) { //currentPage 改变时会触发
      this.pageInfo.page = currentPage
      this.getRandoms() //刷新列表
    }
  }
}
</script>

<style scoped lang='scss'>
.search {
  .right {
    text-align: right;
  }
}
.alert {
  div {
    i {
      margin-right: 5px;
    }
    height: 35px;
    line-height: 38px;
    margin-left: 10px;
    font-size: 12px;
    color: #909399;
  }

  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #f4f4f5;
}
.container {
  .listTable {
    .el-button--danger {
      // color: #f56c6c !important;
      // background-color: #fef0f0;
      // border-color: #fbc4c4;
      color: #f56c6c !important;
      background-color: #fef0f0;
      border-color: #fbc4c4;

      &:hover {
        color: #fff !important;
        background-color: #dd6161;
        border-color: #dd6161;
      }
    }
  }
  .last {
    height: 60px;
  }
}
</style>
